<!--
 * @Author: FengTeng
 * @Date: 2021-02-13 18:12:40
 * @LastEditTime: 2021-03-03 18:45:04
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\customer-detail-modal\CustomerDetailModal.vue
-->
<template>
  <div class="customer-detail-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="customerDetailConfig.rules" ref="customerDetailRef" :model="customerDetailData">
        <el-form-item label="称呼：" prop="nickname">
          <el-input v-model="customerDetailData.nickname" :disabled="customerType.nickname.disabled"></el-input>
        </el-form-item>
        <el-form-item label="联系方式:" prop="phoneNumber">
          <el-input v-model="customerDetailData.phoneNumber" :disabled="customerType.phoneNumber.disabled"></el-input>
        </el-form-item>
        <el-form-item label="性别：" prop="sex">
          <el-input v-model="customerDetailData.sex" :disabled="customerType.sex.disabled"></el-input>
        </el-form-item>
        <el-form-item label="创建人：" prop="creator">
          <el-input v-model="customerDetailData.creator" :disabled="customerType.nickname.disabled"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：" prop="createdDate">
          <el-input v-model="customerDetailData.createdDate" :disabled="customerType.createdDate.disabled"></el-input>
        </el-form-item>
        <el-form-item label="跟进人：" prop="follower">
          <el-input v-model="customerDetailData.follower" :disabled="customerType.follower.disabled"></el-input>
        </el-form-item>
        <el-form-item label="意向：" prop="intention">
          <el-select v-model="customerDetailData.intention" :disabled="customerType.intention.disabled"></el-select>
        </el-form-item>
        <el-form-item label="成交指数：" prop="transactionPercent">
          <el-select
            v-model="customerDetailData.transactionPercent"
            :disabled="customerType.transactionPercent.disabled"
          >
            <el-option v-for="item in transactionPercents" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="follow-log" label="跟进记录" prop="followLog">
          <el-input
            type="textarea"
            placeholder="跟进日志"
            v-model="customerDetailData.followLog"
            resize="none"
            :rows="7"
            :disabled="customerType.followLog.disabled"
          >
          </el-input>
          <el-input class="follow-log-temp" v-model="followLogTemp" placeholder="请输入跟进内容"></el-input>
          <el-button v-if="userPermissions.customerPool.addFollowLog" type="primary" @click="addFollowLog()"
            >添加</el-button
          >
        </el-form-item>
        <el-form-item
          v-if="userPermissions.customerPool.setSelectedProduct"
          class="select-products"
          label=""
          prop="spaProductItems"
        >
          <el-select
            placeholder="请选择购买商品或服务"
            popper-class="select-products-popper"
            multiple
            collapse-tags
            :popper-append-to-body="false"
            v-model="customerDetailData.spaProductItems"
            @click.native="openProductsModal(customerDetailData.spaProductItems)"
          ></el-select>
        </el-form-item>
        <el-form-item class="form-option-button" label="">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
import { mapState } from "vuex";
export default {
  name: "CustomerDetailModal",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      customerDetailData: {
        nickname: "",
        phoneNumber: "",
        sex: "",
        creator: "",
        createdDate: "",
        follower: "",
        intention: "",
        transactionPercent: "",
        followLog: "",
        spaProductItems: []
      },
      customerDetailConfig: {
        rules: {}
      },
      customerType: {
        type: "normal",
        nickname: {
          disabled: true
        },
        phoneNumber: {
          disabled: true
        },
        sex: {
          disabled: true
        },
        creator: {
          disabled: true
        },
        createdDate: {
          disabled: true
        },
        follower: {
          disabled: true
        },
        intention: {
          disabled: true
        },
        transactionPercent: {
          disabled: false
        },
        followLog: {
          disabled: true
        }
      },
      transactionPercents: [1, 2, 3, 4, 5],
      followLogTemp: "", // 跟进记录暂存
      confirmBtnLoading: false
    };
  },
  computed: {
    ...mapState({
      userPermissions: state => state.permissionModule.permissions
    }),
    ...mapState({
      userInfo: state => state.authInfoModule.userinfo
    })
  },
  created() {
    this.customerType.follower.disabled = !this.userPermissions.customerPool.setFollower;
    this.customerType.transactionPercent.disabled = !this.userPermissions.customerPool.setTransactionPercent;
  },
  methods: {
    openModal(event) {
      this.requestCustomerDetail(event.id);
      this.modalConfig.visible = true;
    },
    requestCustomerDetail(customerId) {
      let that = this;
      $.get(
        apis.getCustomerPoolDetails,
        {
          id: customerId,
          type: "find"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.customerDetailData.id = resp.data[0].id;
            that.customerDetailData.nickname = resp.data[0].chenghu;
            that.customerDetailData.phoneNumber = resp.data[0].phone;
            that.customerDetailData.sex = resp.data[0].sex;
            that.customerDetailData.creator = resp.data[0].cjren;
            that.customerDetailData.createdDate = resp.data[0].time;
            that.customerDetailData.follower = resp.data[0].gjren;
            that.customerDetailData.intention = resp.data[0].chenjiaoyixiang === "buyGoods" ? "购买商品" : "购买服务";
            that.customerDetailData.transactionPercent = resp.data[0].chengjiao;
            that.customerDetailData.followLog = resp.data[0].gjjilu;
            that.customerDetailData.spaProductItems = [];
          } else {
            this.$message.error(resp.msg);
          }
        }
      );
    },
    addFollowLog() {
      if (this.followLogTemp.trim() === "") {
        this.$message.warning({
          message: "请填写跟进记录！",
          center: true
        });
      } else {
        let logCreatedDate = new Date();
        logCreatedDate = this.formatDate(logCreatedDate);
        this.customerDetailData.followLog += logCreatedDate + this.followLogTemp.trim() + "\n";
        this.followLogTemp = "";
      }
    },
    setOptionPermissions() {
      this.customerType.followLog.disabled = !this.userPermissions.customerPool.addFollowLog;
      this.customerType.transactionPercent.disabled = !this.userPermissions.customerPool.setTransactionPercent;
    },
    setSelectedProducts(event) {
      this.customerDetailData.spaProductItems = event;
    },
    // 日期格式化函数
    formatDate(date) {
      let fmtDate = date.toISOString();
      fmtDate =
        fmtDate
          .split(".")[0]
          .replaceAll("-", "")
          .replace("T", "  ") + "   ";
      let localHour = (+fmtDate.substring(10, 12) + 8) % 24;
      fmtDate = fmtDate.substring(0, 10) + localHour + fmtDate.substring(12);
      return fmtDate.toString();
    },
    // 打开商品/服务选择弹窗
    openProductsModal(spaProductItems) {
      if (this.userPermissions.customerPool.setSelectedProduct) {
        this.$emit("open-products-modal", spaProductItems);
      } else {
        this.$message.warning("当前用户没有对应权限！");
      }
    },
    handleCancel() {
      this.modalConfig.visible = false;
      console.log("取消操作");
      this.resetFormData();
    },
    handleConfirm() {
      console.log("提交表单");
      console.log(...this.customerDetailData.spaProductItems);
      this.confirmBtnLoading = true;
      let that = this;
      $.post(
        apis.setCustomerToMember,
        {
          id: this.customerDetailData.id,
          gjren: this.userInfo.name,
          gjjilu: this.customerDetailData.followLog || "",
          shangpinname: this.customerDetailData.spaProductItems[0],
          type: "update"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            that.$emit("refresh-table");
            that.modalConfig.visible = false;
            that.$message.success(resp.msg);
          } else {
            this.$message.error(resp.msg);
          }
          this.confirmBtnLoading = false;
        }
      );
    },
    handleDialogClose() {
      this.resetFormData();
    },
    resetFormData() {
      debugger
      console.log("重置表单");
      this.customerDetailData = {
        nickname: "",
        phoneNumber: "",
        sex: "",
        creator: "",
        createdDate: "",
        follower: "",
        intention: "",
        transactionPercent: "",
        followLog: "",
        spaProductItems: []
      };
      this.confirmBtnLoading = false;
      this.followLogTemp = "";
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
